<template>
    <div class="viewport">
        <HomeHead class="head" :showLeft="true" :name="'列表'" />
        <div class="listViewport">
    
            <mt-loadmore :cancelable="false" :bottom-method="loadBottom" :auto-fill="false" :bottom-all-loaded="allLoaded" ref="loadmore">
                <div class="li" v-for="(item,index) in listData" @click="gotoDetail(item)" :key="index">
                    <div class="title">
                        {{item.题名}}
                    </div>
                    <div class="author">
                        <span class="author1">
                                <span class="name">作者：</span>
                        <span class="name">{{item.作者}}</span>
                        </span>
                        <span class="label"> 
                                <span class="name">标签：</span>
                        <span class="name">{{item.来源数据库}}</span>
                        </span>
                    </div>
                    <div class="content">
                        <span class="name">内容：</span>
                        <span class="name">{{item.题名}}</span>
                    </div>
                    <div class="info">
                        <div class="nma">
                            <span>下载量：</span>
                            <span>{{item.下载频次}}</span>
                        </div>
                        <div class="nma">
                            <span>浏览量：</span>
                            <span>{{item.浏览频次}}</span>
                        </div>
                        <div class="time">
                            <span>发表时间：</span>
                            <span>{{item.发表时间.split(" ")[0]}}</span>
                        </div>
                    </div>
                </div>
            </mt-loadmore>
        </div>
    
    </div>
</template>

<script>
import HomeHead from "./homeHead.vue";
import { getHomeList } from "../../api/home.js";
export default {
    data() {
        return {
            listData: [
            ],
            tabItem: {},
            allLoaded: false,
            show: true,
            allLoaded: false,
            paramsData:{},
            pagenow:1,
        }
    },

    mounted() {
        this.$route.query.data ? this.paramsData =JSON.parse(this.$route.query.data) : "";
        this.getList();
    },

    methods: {
        getList() {
            getHomeList({
              ...this.paramsData,
              pagenow:this.pagenow,
              pagesize:5,
            }).then((res) => {
              this.listData.push(...JSON.parse(res.data.data));
            });
        },
        loadBottom() {
            this.pagenow = this.pagenow + 1;
            getHomeList({
              ...this.paramsData,
              pagenow:this.pagenow,
              pagesize:5,
            }).then((res) => {
              this.listData.push(...JSON.parse(res.data.data));
            });

        },
        gotoDetail(item) {
            let type = 1;
            let url = "";
            let data = JSON.stringify({
                dbcode: item.TABLENAME,
                sysid: item.SYS_FLD_SYSID,
                fileName:item.文件名,
                dbname:item.来源数据库,
                vsm:item.SYS_VSM,
            });
            // 本地
            if(item.TABLENAME && item.TABLENAME.indexOf('_METADATA') !=-1){
            }else{
                type = 2;
                url =item.细览链接;
            } 
            if(type === 2) {
                this.$router.push({
                    path: "/cnkiDetail",
                    query: {
                        type,
                        data,
                        url,
                        tableName:item.表名,
                        name: item.题名,
                    }
                })
                }else {
                    this.$router.push({
                        path: "/detail",
                        query: {
                            type,
                            data,
                            url,
                            tableName:item.表名,
                            name: item.题名,
                        }
                    })
                }
        },
      
    },
    components: {
        HomeHead
    },
}
</script>

<style lang="scss" scoped>
.viewport {
    height: 100vh;
    width: 100%;
    background: rgb(236, 243, 249);
    padding-top: 20px;
    box-sizing: border-box;
    .head {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
}

.listViewport {
    width: 100%;
    margin-top:40px;
    height:calc(100vh - 60px);
    box-sizing: border-box;
    overflow-y: auto;
    .li {
        background: #fff;
        vertical-align: top;
        margin-bottom: 20px;
        width: 100%;
        border-bottom: 1px solid #bbb;
        padding: 10px;
        box-sizing: border-box;
        .title {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            font-size: 14px;
            text-overflow: ellipsis;
        }
        .author {
            font-size: 12px;
            color: #bbb;
            margin-top: 10px;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            .name {
                margin-right: 5px;
            }
            .name:last-child {
                margin-right: 0;
            }
            .author1 {
                display: inline-block;
                vertical-align: middle;
                width: 60%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .label {
                float: right;
                display: inline-block;
                vertical-align: middle;
                width: 29%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                text-align: left;
            }
        }
        .content {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin-top: 15px;
            font-size: 12px;
            color: #bbb;
        }
        .info {
            margin-top: 15px;
            font-size: 12px;
            color: #bbb;
            display: flex;
            .nma {
                flex: 1;
                text-align: left;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .time {
                width: 140px;
                text-align: right;
            }
        }
    }
}
</style>